<template>
	<view class="">
		<view class="content_top">
			<view class="top_centre">
				<view>您最高可以借200000元</view>
				<view class="top_all" @click="money = '200000'">全部借出</view>
			</view>
			<view class="top_input">
				<text class="money">￥</text>
				<input class="top_box_input" v-model="money" type="number" placeholder="请输入借款金额" placeholder-class="input-placeholder" maxlength="6" />
				<view class="top_input_r">
					<text>（金额可修改）</text>
					<image class="guanbi" src="/static/icon/guan_bi.png" lazy-load="false" @click="money = ''"></image>
				</view>
			</view>
			<view class="top_b">
				<view class="icon">限时优惠</view>
				<view class="top_b-r">
					<text class="">日利率</text>
					<text class="">0.025%</text>
					<text class="">0.035%</text>
					<text class="">（1千元用1天只需0.25元）</text>
				</view>
			</view>
			<view class="btns">
				<view class="btn1" @click="openView">立即提现</view>
				<view class="btn2" @click="openView">低息大额提现</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'userNo',
	components: {},
	data() {
		return {
			money: '50000'
		}
	},
	computed: {},
	watch: {},
	onLoad() {},
	onShow() {},
	onReady() {},
	// 方法集合
	methods: {
		openView() {
			uni.navigateTo({
				url: `/pages/auth/material?money=${this.money}`
			})
		}
	},
	onHide() {},
	onUnload() {}
}
</script>
<style lang="scss" scoped>
.content_top {
	padding: 24rpx;
}
.top_centre {
	margin-top: 44rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #696969;
	.top_all {
		color: #3478f2;
	}
}
.top_b {
	margin-top: 32rpx;
	display: flex;
	align-items: center;
	.icon {
		background-color: #f1b941;
		width: 120rpx;
		height: 48rpx;
		line-height: 48rpx;
		border-radius: 40rpx 40rpx 40rpx 0px;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #ffffff;
	}
}
.top_b-r {
	display: flex;
	align-items: center;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #464646;
	margin-left: 8rpx;
}
.top_b-r text:nth-of-type(3) {
	text-decoration: line-through;
}
.top_b-r text:nth-of-type(1) {
	color: #464646;
}
.top_b-r text:nth-of-type(2) {
	color: #fc1f1f;
	margin: 0 4rpx;
}
.top_b-r text:nth-of-type(4) {
	color: #333333;
	font-size: 20rpx;
	margin-left: 8rpx;
}
.input-placeholder {
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #aeaeae;
}
.top_input_r {
	display: flex;
	align-items: center;
	text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #aeaeae;
	}
}
.guanbi {
	width: 32rpx;
	height: 32rpx;
}
.top_box_input {
	font-size: 72rpx;
	font-family: PingFang SC;
	font-weight: 800;
	color: #333333;
	margin-left: 10rpx;
	width: 328rpx;
}
.money {
	// width: 60rpx;
	// height: 60rpx;
	font-size: 72rpx;
}
.top_input {
	height: 104rpx;
	background: #ffffff;
	border-bottom: 1rpx solid #cdd0d6;
	display: flex;
	align-items: center;
}
.box_input {
	margin-left: 20rpx;
	font-size: 32rpx;
	width: 100%;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
}
.btns {
	margin-top: 66rpx;
	padding: 0 60rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.btn1 {
	background: #e5eeff;
	border: 2rpx solid #bdbdbd;
	border-radius: 38rpx;
	color: #3478f2;
}
.btn2 {
	background: #3478f2;
	border-radius: 36rpx;
	color: #ffffff;
}
.btn1,
.btn2 {
	width: 208rpx;
	height: 76rpx;
	line-height: 76rpx;
	text-align: center;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
}
.btn1:active,
.btn2:active {
	opacity: 0.5;
}
</style>
